﻿<div class="layui-card" id="lg-media-codeList">
    <div class="layui-card-header"><i class="fa fa-home fa-fw"></i>媒体码</div>
    <div class="layui-card-body" id="">
        <!--数据主体-->
        <div class="lg-form-box">
            <!--头部工具条-->
            <div class="lg-table-tool" id="toolbar">
                <div class="layui-btn-container">
                    <button class="layui-btn layui-btn-sm layui-btn-normal" v-on:click="switchPanel(0)"><i class="fa fa-file-excel-o fa-fw"></i>添加</button>
                    <button class="layui-btn layui-btn-sm layui-btn-primary" v-on:click="getMCodeList"><i class="fa fa-refresh fa-fw"></i>刷新</button>
                </div>
            </div>
            <!--table-->
            <div class="lg-table-body">
                <table class="lg-table">
                    <thead>
                        <tr>
                            <th class="lg-table-check"> 序号</th>
                            <th>名称</th>
                            <th>描述</th>
                            <th>目标地址</th>
                            <th style="width:100px;text-align:center">访问量</th>
                            <th style="width:100px;text-align:center">转化率</th>
                            <th style="width:110px">添加日期</th>
                            <th style="width:100px;text-align:center">状态</th>
                            <th style="width:160px">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(row,index) in table.data">
                            <td class="lg-table-check">
                                {{index+1}}
                            </td>
                            <td>{{row.Title}}</td>
                            <td>{{row.Intro}}</td>
                            <td>{{row.LinkUrl}}</td>
                            <td style="text-align:center">{{row.ViewCount}}</td>
                            <td style="text-align:center">{{getPercentage(row)}}</td>
                            <td>{{row.AddTime}}</td>
                            <td style="text-align:center">
                                <div :class="['layui-unselect layui-form-switch',{'layui-form-onswitch':row.IsUsing==1}]" v-on:click="onSwitch('IsUsing',row)">
                                    <em>{{row.IsUsing==1?'ON':'Off'}}</em><i></i>
                                </div>
                            </td>
                            <td>
                                <a class="layui-btn layui-btn-xs layui-btn-normal" v-on:click="onInfo(row)" title="查看详情"><span class="fa fa-pencil-square-o fa-fw "></span></a>
                                <a class="layui-btn layui-btn-xs layui-btn-warm" v-on:click="onDelete(row)" title="删除"><span class="fa fa-trash-o fa-fw"></span></a>
                                <a class="layui-btn layui-btn-xs" v-on:click="onShowQrcode(row)" title="二维码"><span class="fa fa-qrcode fa-fw"></span></a>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <!--分页-->
            <div id="pager-media-codes" style="margin-top:-10px;"></div>
        </div>
    </div>
    <!--弹层-->
    <div>
        <div :class="['popupShadow',{'act':panel[0]}]" v-on:click="switchPanel(0)"></div>
        <div :class="['popupContainer-right',{'act':panel[0]}]" style="width:500px">
            <div class="popupTitle">
                <h3><i class="fa fa-cog fa-fw" aria-hidden="true"></i>控制面板</h3>
                <span class="fa fa-angle-right" v-on:click="switchPanel(0)"></span>
            </div>
            <div class="popupContent">
                <form class="layui-form layui-form-pane" action="" id="fm_AddMCode" lay-filter="fm_AddMCode">
                    <div class="layui-form-item">
                        <label class="layui-form-label"><i style="color:#f00">*</i>名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="Title" class="layui-input" placeholder="填写名称" lay-verify="required" />
                        </div>
                    </div>
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">描述</label>
                        <div class="layui-input-block">
                            <textarea placeholder="填写描述" name="Intro" class="layui-textarea"></textarea>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><i style="color:#f00">*</i>目标地址</label>
                        <div class="layui-input-block">
                            <input type="text" name="LinkUrl" class="layui-input" placeholder="目标地址" lay-verify="required" />
                        </div>
                    </div>
                    <div class="layui-form-item" pane="">
                        <label class="layui-form-label">是否启用</label>
                        <div class="layui-input-block">
                            <input type="checkbox" checked="" name="IsUsing" value="1" lay-skin="switch" lay-filter="IsUsing" lay-text="ON|OFF">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block text-center">
                            <button class="layui-btn" lay-submit lay-filter="bt_AddMCode">立即提交</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script type="module">
    import { freeForm } from '/plugins/lgform/lg.form.2.1.js';
    frame.createPage({
        mounted: function () {
            var page = this;
            var app = Vue.createApp({
                data() {
                    return {
                        mcodes: [],
                        table: {
                            cols: [],
                            checked: [],
                            data: [],
                            where: {
                                page: 1,
                                limit: 10
                            },
                            loading: false
                        },
                        panel:[false]
                    }
                },
                mounted: function () {
                    this.getMCodeList();
                    this.layInit();                  
                },
                methods: {
                    getPercentage:function(row){
                        if(row.ViewCount>0&&row.SignCount>0){
                           return (row.SignCount/row.ViewCount).toFixed(2)*100+"%"
                        }else{
                           return '0.00%'
                        }
                    },
                    layInit:function(){
                        var that=this;
                        var form=layui.form;
                        form.render();
                        form.on('submit(bt_AddMCode)', function (d) {
                            var data = d.field;
                            that.postAddMcode(data);
                            return false;
                        })
                    },
                    getMCodeList: function () {
                        lg.request({
                            url: "/api/sys/media/getmcodelist",
                            success: res => {
                                if (res.code == 0) {
                                    this.table.data = res.data;
                                    this.setPage(res.count);
                                } else {
                                    layer.msg(res.msg, { icon: 2 });
                                }
                            }
                        })
                    },
                    setPage: async function (count) {
                        var that = this;
                        layui.laypage.render({
                            elem: 'pager-media-codes'
                            , curr: that.table.where.page
                            , limit: that.table.where.limit
                            , count: count
                            , layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
                            , jump: function (obj, first) {
                                if (!first) {
                                    that.table.where.page = obj.curr;
                                    that.table.where.limit = obj.limit;
                                    that.getMCodeList();
                                }
                            }
                        });
                    },
                    postAddMcode:function(data){
                        lg.requestAsync({
                            url: "/api/sys/media/AddMCode",
                            method: "post",
                            data: data
                        }).then(res=>{
                            if (res.code == 0) {
                                this.switchPanel(0);
                                layer.msg("添加成功！", { icon: 1 });
                                this.getMCodeList();
                                layui.form.val("fm_AddMCode",{
                                    Title:"",
                                    Intro:"",
                                    LinkUrl:"",
                                    IsUsing:1
                                })
                            } else {
                                layer.msg(res.msg, { icon: 2 })
                            }
                        })
                    },
                    onShowQrcode: function (item) {
                        var htm = "<div class='codeLoadWrap'><img src='{$qrocde}' /><br/><span style='line-height:50px'>{$url}</span></div>"
                        lg.requestAsync({
                            url: "/api/sys/media/GetMCodeQRCode",
                            data: { id: item.Id,size:250}
                        })
                        .then(res => {
                            if (res.code == 0) {
                                htm = htm.replace("{$qrocde}", res.data.img).replace("{$url}", res.data.url);
                                layer.open({
                                    type: 1,
                                    area: ['400px', '400px'],
                                    content: htm
                                })
                            } 
                            else
                            {
                                layer.msg(res.msg, { icon: 2 })
                            }
                        })
                    },
                    onSwitch: function (name, item) {
                        var postData = {};
                        postData.Id = item.Id;
                        postData[name] = item[name] == 1 ? 0 : 1;
                        lg.requestAsync({
                            url: "/api/sys/media/EditMCode",
                            method:"post",
                            data: postData
                        }).then(res => {
                            if (res.code == 0) {
                                item[name] = postData[name]
                            } else {
                                layer.msg(res.msg, { icon: 2 })
                            }
                        })
                    },
                    onDelete:function(item){
                        var that=this;
                        layer.confirm("删除不可恢复，是否确认继续执行？",function(box){
                            layer.close(box)
                            lg.requestAsync({
                                url: '/api/sys/media/deleteMcode',
                                method: "post",
                                data: { Id: item.Id }
                            }).then(res => {
                                if (res.code == 0) {
                                    that.getMCodeList();
                                } else {
                                    layer.msg(res.msg, { icon: 2 })
                                }
                            })
                        })
                        
                    },
                    onInfo:function(item){
                        frame.NavigateTo({
                            url:"/lgm/media/Mcode/info/"+item.Id,
                            title:"媒体详情"
                        })
                    },
                    onAdd:function(){
                        frame.NavigateTo({
                            url: "/lgm/media/Mcode/add",
                            title: "添加"
                        })
                    },
                    switchPanel:function(index,state){
                        if (state == undefined) {
                            this.panel[index] = !this.panel[index];
                        } else {
                            this.panel[index] = state
                        }
                    }
                }
            })
            freeForm.regComponent(app);
            page.vm = app.mount("#lg-media-codeList")
        },
        methods: {
            reload: function () {
                this.vm.getMCodeList();
            }
        }
    }).mount();
</script>